'use client'
import React, { useEffect, useState } from 'react';
import { LockOutlined, UserOutlined, ArrowRightOutlined, OpenAIOutlined } from '@ant-design/icons';
import { Button, Form, Input, Card } from 'antd';
import '@/app/globals.css'
import { useRouter } from 'next/navigation';
const Login: React.FC = () => {
  // 使用useRouter获取路由信息
  let router = useRouter()
  // 使用Form.useForm()获取表单信息
  const [form] = Form.useForm();
  // 使用useState设置clientReady状态
  const [clientReady, setClientReady] = useState<boolean>(false);

  // To disable submit button at the beginning.
  // 在开始时禁用提交按钮
  useEffect(() => {
    setClientReady(true);
  }, []);

  // 表单提交事件
  const onFinish = (values: any) => {
    console.log('Finish:', values);
    // 将用户名存储到localStorage中
    localStorage.setItem('token', values.username)
    // 跳转到/page页面
    router.push('/page')
  };

  return (
    <div className='box'>
      <div style={{ width: "100%", height: '300px', margin: "15% auto", backgroundColor: 'black', opacity: "0.6", textAlign: "center", paddingTop: '15px' }}>
        <h1 style={{ color: 'white', fontSize: '50px' }}><OpenAIOutlined style={{ fontSize: '80px', color: 'white', position: 'relative', top: '15px' }} />客户关系管理系统
          <div style={{ fontSize: '20px' }}>Customer Relationship Management</div>
        </h1>
        <div style={{ display: 'flex', justifyContent: 'center' }} className='bg-color'>
          <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input prefix={<UserOutlined />} placeholder="请输入用户名" style={{ height: '50px', width: '300px', opacity: '1' }} />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input prefix={<LockOutlined />} type="password" placeholder="请输入登陆密码" style={{ height: '50px', width: '300px', opacity: '1' }} />
            </Form.Item>
            <Form.Item shouldUpdate>
              {() => (
                <Button
                  htmlType="submit"
                  className='anniu'
                >
                  <ArrowRightOutlined />
                </Button>
              )}
            </Form.Item>
          </Form>
        </div>

      </div>
    </div>
  );
};

export default Login;
